import React, {Component} from 'react';
import {
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    SafeAreaView,
} from 'react-native';

import NestedListView, {NestedRow} from 'react-native-nested-listview'
import Modal from "react-native-modal";
import { RRCLoading, RRCToast, RRCAlert } from 'react-native-overlayer';

import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';

import HttpUtil from '../util/HttpUtil';

export default class UserSelectModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            users: [],
        }
    }

    submit = (e) => {
        alert(e.nativeEvent.text);
        if(e.nativeEvent.text){
            HttpUtil.post('basicData', null)
            .then(result => {         
                if(result.httpCode == 200){
                    this.setState({
                        users: null,
                    });
                }
            })
            .catch(error => {
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 3000);
            })
        }
    }

    render() {
        return (
            <Modal isVisible={ this.props.isVisible } onRequestClose={this.props.onRequestClose}>
                <SafeAreaView style={[styles.container, Platform.OS == 'ios'  && getScreenHeight() > 667 ? { marginTop: getPixel(-9), } : null]}>
                    <View style={{flexDirection: 'row', backgroundColor: '#4A69DD', alignItems: 'center', marginLeft: getPixel(-20), width: getScreenWidth(), height: getPixel(40)}}>
                        <View style={{ width: getPixel(55), justifyContent:'center', alignItems:'center', height: getPixel(40)}}>

                        </View>
                        <View style={{ width: getScreenWidth() - getPixel(110), height: getPixel(40), }}>
                            <Text style={{height: getPixel(40),lineHeight: getPixel(40), textAlign:'center',fontSize: getPixel(16),color:'#FFF'}}>选择使用人</Text>
                        </View>
                        <TouchableOpacity style={{width: getPixel(55), height: getPixel(40), justifyContent:'center', alignItems:'center'}} onPress={ this.props.closeModal.bind(this) }>
                            <View style={{ width: getPixel(55), justifyContent:'center', alignItems:'center'}}>
                                <Image source={ require('../images/close.png')}  style={{ resizeMode: 'contain', width: getPixel(16), height: getPixel(16) }} />
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={{ width: getScreenWidth(), marginLeft: getPixel(-20), backgroundColor:'#FFF'}}>
                        <View style={{  width: getScreenWidth(), backgroundColor: '#EFF1F8', height: getPixel(40), flexDirection: 'row' }}>
                            <View style={{justifyContent: 'center'}}>
                                <Image source={ require('../images/search.png')}  style={{ resizeMode: 'contain', width: getPixel(26), height: getPixel(24), marginLeft: getPixel(10)}} />
                            </View>
                            <View style={{justifyContent: 'center'}}>
                                <TextInput underlineColorAndroid='transparent' onSubmitEditing={this.submit}  returnKeyType='search' onChangeText={(text) => this.props.setKeyWord(text)} style={{ width: getScreenWidth() - getPixel(170), fontSize: getPixel(16), paddingLeft: getPixel(10), paddingVertical: 0 }} placeholder="搜索人员"/>
                            </View>
                        </View>
                    </View>
                    <View style={[{ width: getScreenWidth(), backgroundColor: '#FFF', marginLeft: getPixel(-20) }, Platform.OS == 'ios' && getScreenHeight() > 667 ? {height: getScreenHeight() - getPixel(120)} : {height: getScreenHeight() - getPixel(80)}]}>
                        <NestedListView
                            data={this.state.users}
                            getChildrenName={(node) => 'users'}
                            onNodePressed={this.props.selectNode}
                            renderNode={(node, level) => (
                                <NestedRow
                                    level={level}
                                >
                                    <Text style={styles.row}>{node.name}</Text>
                                </NestedRow>
                            )}
                        />
                    </View>
                </SafeAreaView>
            </Modal>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: Platform.OS === 'android' ? - getPixel(20) : null,
        backgroundColor: '#FFF',
    },
    row: {
        fontSize: getPixel(16),
        color: '#333',
        paddingLeft: getPixel(10),
    },
});